<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>商品管理</title>


    <script src="../static/js/vue.js"></script>
    <script src="../static/js/axios.js"></script>
    <link rel="stylesheet" href="../static/elementui/theme-chalk/index.css"/>
    <script src="../static/elementui/index.js"></script>


    <style>
        .avatar-uploader .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }

        .avatar-uploader .el-upload:hover {
            border-color: #409EFF;
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 78px;
            height: 78px;
            line-height: 78px;
            text-align: center;
        }

        .avatar {
            width: 178px;
            height: 178px;
            display: block;
        }
    </style>
</head>
<body>
<div id="app">

    <table cellspacing="20" cellpaddteachering="0" width="900px">
        <tr>
            <td>商品名称：</td>
            <td colspan="5">
                <el-input style="width: 500px;" v-model=" goodsName" placeholder="最多输入40个字" maxlength="40" show-word-limit></el-input>
            </td>
        </tr>
        <tr>
            <td>商品介绍：</td>
            <td colspan="5">
                <el-input style="width: 500px;" v-model=" goodsDesc" show-word-limit type="textarea" :rows="4" placeholder="请输入商品介绍">
                </el-input>
            </td>
        </tr>
<!--        <tr>-->
<!--            <td>商品标签：</td>-->
<!--            <td colspan="5">-->
<!--                <el-select slot="prepend" style="width: 150px;" v-model="brandLabel">-->
<!--                    <el-option label="非实物" value="0"></el-option>-->
<!--                    <el-option label="实物" value="1"></el-option>-->
<!--                </el-select>-->
<!--            </td>-->
<!--        </tr>-->
        <tr v-if="brandLabel==0">
            <td>课时：</td>
            <td colspan="5">
                <el-input placeholder="课时" style="width: 150px;" v-model="classHour"></el-input>
            </td>
        </tr>
        <tr>
            <td>商品图：</td>
            <td colspan="5">
                    <el-upload
                            class="avatar-uploader"
                            action="http://localhost:8080/ep/files/upload"
                            :show-file-list="false"
                            :on-success="handleAvatarSuccess"
                            :before-upload="beforeAvatarUpload">
                        <img v-if="imageUrl" :src="imageUrl" class="avatar">
                        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                    </el-upload>

                <template slot-scope="scope">
                    <img width="50px" height="50px" :src="imageUrl"/>
                </template>


            </td>
        </tr>
        <tr v-if="brandLabel==0">
            <td >视频：</td>
            <td colspan="5">
                <el-upload
                        class="avatar-uploader"
                        action="http://localhost:8080/ep/files/upload"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess1"
                        :before-upload="beforeAvatarUpload1">
                    <img v-if="detail" :src="detail" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>

                <template slot-scope="scope" >
                    <img width="50px" height="50px" :src="detail"/>
                </template>
            </td>
        </tr>
        <tr v-if="brandLabel==0">
            <td>老师：</td>
            <td colspan="5">
                <el-select  style="width: 150px;" v-model="fkTeacherId">
                <el-option :label="t.teacherName" :value="t.id" v-for="(t,index) in teacher[0]" :key="t.id" ></el-option>
            </el-select>
            </td>
        </tr>
        <tr v-if="brandLabel==0">
            <td>类别：</td>
            <td colspan="5">
                <el-select  style="width: 150px;" v-model="fkProjectId">
                    <el-option :label="p.projName" :value="p.id" v-for="(p,index) in pro[0]" :key="p.id" ></el-option>
                </el-select>
            </td>
        </tr>
        <tr v-if="brandLabel==0" >
            <td>有效期：</td>
            <td colspan="5">
                <el-select slot="prepend" style="width: 150px;" v-model="useful">
                    <el-option label="一年" value="1"></el-option>
                    <el-option label="两年" value="2"></el-option>
                    <el-option label="三年" value="3"></el-option>
                </el-select>
            </td>
        </tr>
        <tr>
            <td>商品价格：</td>
            <td colspan="5">
                <el-input placeholder="元" style="width: 150px;" v-model="marketPrice"></el-input>
            </td>
        </tr>
        <tr>
            <td>划线价：</td>
            <td colspan="5">
                <el-input placeholder="元" style="width: 150px;" v-model="salesPrice"></el-input>
            </td>
        </tr>
        <tr>
            <td>库存：</td>
            <td colspan="5">
                <el-input style="width: 150px;" v-model="stock"></el-input>

            </td>
        </tr>
        <tr >
            <td>上架时间</td>
            <td colspan="5">
                <el-radio label="0" v-model="status">立即上架</el-radio>
                <el-radio label="1" v-model="status">暂不售卖</el-radio>
            </td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>
                <el-button type="primary" @click="saveGoods()">保存</el-button>
            </td>
            <td>
                <el-button type="primary" @click="addout()">取消</el-button>
            </td>
        </tr>
    </table>
</div>
</body>

<script>
    let app = new Vue({
        el: "#app",
        data: {
            goodsName: '',
            goodsDesc: "",
            brandLabel: "0",
            classHour: "",
            image: "",
            videoId: "",
            fkTeacherId: "",
            fkProjectId: "",
            useful: "",
            detail:"",
            marketPrice: "",
            salesPrice: "",
            stock: "",
            status: "",
            imageUrl: "",

            /*项目数据*/
            pro:[],
            /*老师数据*/
            teacher:[],
        },
        methods: {
            /*图片上传*/
            handleAvatarSuccess(res, file) {
                console.info(res);
                this.imageUrl=res;
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            handleAvatarSuccess1(res, file) {
                console.info(res);
                this.detail=res;
            },
            beforeAvatarUpload1(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            /**/



            saveGoods: function() {
                if(this.brandLabel==1){
                    this.classHour="";
                    this.videoId="";
                    this.fkTeacherId="" ;
                    this.fkProjectId="";
                    this.useful="";
                }
                axios.get("[[@{/goods/addGoods}]]", {
                    params: {
                        goodsName: this.goodsName,
                        goodsDesc: this.goodsDesc,
                        brandLabel: this.brandLabel,
                        classHour: this.classHour,
                        videoId: this.videoId,
                        fkTeacherId: this.fkTeacherId,
                        fkProjectId: this.fkProjectId,
                        useful: this.useful,
                        marketPrice: this.marketPrice,
                        salesPrice: this.salesPrice,
                        stock: this.stock,
                        status: this.status,
                        image:this.imageUrl,
                        detail:this.detail
                    },
                }).then(function(res) {
                    console.info(res)
                    console.info(res.data)
                });
            },
            addout: function() {
                //关闭添加窗口
                window.location.href = "[[@{/goods}]]"
            },
        },
        mounted() {
            let allGoods=[]
            axios.get("[[@{/goods/teaAndPro}]]")
                .then(res => { //此处一定要用 箭头函数  不然this 就不是this
                    console.info(res.data.data)
                    allGoods = res.data.data
                    app.$data.teacher.push(allGoods)
                    console.info(allGoods)
                    console.info(app.$data.teacher)
                });
                axios.get("[[@{/goods/teaAndPro1}]]")
                    .then(res => { //此处一定要用 箭头函数  不然this 就不是this
                        console.info(res.data.data)
                        allGoods = res.data.data
                        app.$data.pro.push(allGoods)
                        console.info(allGoods)
                        console.info(app.$data.teacher)
                    });
        },
    })
</script>
</html>
